<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const isEditing = ref(false);
const account = ref({
  username: '',
  email: '',
  phone: '',
  address: '',
  storeName: '',
  avatarUrl: ''
});
const accountFormRef = ref(null);

const defaultRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
};

const computedRules = computed(() => (isEditing.value ? defaultRules : {}));

const onEdit = () => {
  isEditing.value = true;
};

const onSave = () => {
  accountFormRef.value.validate((valid) => {
    if (valid) {
      isEditing.value = false;
      // 发送 PUT 请求更新商家信息
      axios.put(`http://localhost:8080/sellers/1`, {
        username: account.value.username,
        email: account.value.email,
        phoneNumber: account.value.phone,
        account: account.value.account,
        password: account.value.password,
        address: account.value.address,
        storeName: account.value.storeName,
        avatarUrl: account.value.avatarUrl
      })
      .then(response => {
        console.log('账号信息已保存！', response.data);
      })
      .catch(error => {
        console.error('更新失败:', error);
      });
    } else {
      console.error('请完善账号信息！');
    }
  });
};

const onCancel = () => {
  isEditing.value = false;
  accountFormRef.value.resetFields();
};

onMounted(async () => {
  try {
    const response = await axios.get('http://localhost:8080/sellers/1');
    const data = response.data;
    account.value.username = data.username;
    account.value.email = data.email;
    account.value.phone = data.phoneNumber;
    account.value.address = data.address;
    account.value.storeName = data.storeName;
    account.value.avatarUrl = data.avatarUrl;
  } catch (error) {
    console.error('获取数据失败', error);
  }
});
</script>

<template>
  <div class="account-management">
    <div class="avatar-section">
      <img :src="account.avatarUrl" alt="头像" class="avatar" />
      <!--<el-button v-if="isEditing" @click="onEditAvatar">更换头像</el-button>-->
    </div>
    
    <div class="account-info">
      <el-form
          ref="accountFormRef"
          :model="account"
          :rules="computedRules"
          label-width="100px"
          class="account-form"
      >
        <el-form-item label="商店名称" prop="storeName">
          <el-input v-model="account.storeName" :disabled="!isEditing" placeholder="请输入商店名称"></el-input>
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="account.username" :disabled="!isEditing" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="account.email" :disabled="!isEditing" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="account.phone" :disabled="!isEditing" placeholder="请输入联系方式"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input
              type="textarea"
              v-model="account.address"
              :disabled="!isEditing"
              placeholder="请输入地址"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="account-actions">
      <el-button v-if="!isEditing" type="primary" @click="onEdit" class="edit-button">编辑</el-button>
      <el-button v-else type="primary" @click="onSave" class="save-button">保存</el-button>
      <el-button v-if="isEditing" @click="onCancel" class="cancel-button">取消</el-button>
    </div>
  </div>
</template>

<style scoped>
.account-management {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
}
.avatar-section {
  margin-right: 20px; /* 头像和信息之间的间距 */
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.account-info {
  flex-grow: 1; /* 占据剩余空间 */
}
.account-actions {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中对齐按钮 */
  gap: 10px; /* 按钮之间的间距 */
}
</style>